<template>
  <div>
    <myheader></myheader>
    <section class="featured-block text-center">
      <div class="container">
        <div class="row">
          <div class="col-md-6 text-center">
            <div class="product-image mt-3">
              <img class="img-fluid" :src="qiniu_img_url" />
            </div>
            <div class="product-thumbnails">
              <a href="#">
                <img class="mt-2 mr-2 img-fluid" :src="qiniu_img_url" />
              </a>
              <a href="#">
                <img class="mt-2 mr-2 img-fluid" :src="qiniu_img_url" />
              </a>
              <a href="#">
                <img class="mt-2 mr-2 img-fluid" :src="qiniu_img_url" />
              </a>
              <a href="#">
                <img class="mt-2 mr-2 img-fluid" :src="qiniu_img_url" />
              </a>
              <a href="#">
                <img class="mt-2 mr-2 img-fluid" :src="qiniu_img_url" />
              </a>
            </div>
          </div>
          <div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
            <h2 class="mb-3 mt-0">
              {{ good.name }}
              <Button @click="adduserflow()">{{ userflowbutton }}</Button>
            </h2>
            <h4>
              <i v-for="i in tags">
                <Button text-color="red">{{ i }}</Button>
              </i>
            </h4>
            <p class="lead mt-2 mb-3 primary-color">{{ good.price }}</p>
            <h5 class="mt-4">描述</h5>
            <p></p>
            <h5 class="mt-5">其他参数</h5>
            <p>颜色:{{color}}</p>
            <p>尺寸:{{size}}</p>
            <p>配置:{{config_good}}</p>
            <div v-show="good.video">
              <h5>演示视频</h5>
              <video :src="qiniu_image_url" width="300" controls="controls" autoplay muted></video>
            </div>

            <a href="javascript:void(0)" class="btn btn-full-width btn-lg btn-outline-primary" @click='add_cart'>添加到购物车</a>
          </div>
        </div>
      </div>
    </section>

    <div class="divider"></div>

    <section class="products text-center">
      <div class="container">
        <table>
          <tr>
            <th>收藏名单</th>
          </tr>
          <tr v-for="user in userflows">
            <td>{{ user.username }}</td>
          </tr>
        </table>
        <div>收藏数量:{{ flow }}</div>
      </div>
    </section>

    <div class="divider"></div>

    <section class="products text-center">
      <div class="container">
        <textarea v-model="content"></textarea>
        <br />

        <!-- 利用前端防止恶意评论 -->
        <!-- <Button color="blue" @click="comment" :disabled="isDisable">评论</Button> -->

        <!-- 利用redis方法防止恶意评论 -->
        <Button color="blue" @click="comment">评论</Button>

        <br />
        <mycomment :contentlist='this.contentlist' :myuser='this.myuser'></mycomment>
        <Pagination v-model="pagination_comment" layout="pager" small @change="change_pag_comment" align="center"></Pagination>
      </div>
    </section>

    <div class="divider"></div>
    <section class="products text-center">
      <div class="container">
        <h3 class="mb-4">相关产品</h3>
        <div class="row">
          <div v-for="item in datalist" class="col-sm-6 col-md-3 col-product">
            <figure>
              <img
                class="rounded-corners img-fluid"
                :src="qiniuurl + item.img"
                width="240"
                height="240"
              />
              <figcaption>
                <div class="thumb-overlay">
                  <a href="item" title="More Info">
                    <i class="fas fa-search-plus"></i>
                  </a>
                </div>
              </figcaption>
            </figure>
            <!-- <h4><a href="item">{{ item.name }}</a></h4> -->
            <h4>
              <router-link :to="{name:'item',params:{'id':item.id}}">{{ item.name }}</router-link>
            </h4>
            <p>
              <span class="emphasis">${{ item.price }}</span>
            </p>
          </div>
        </div>
        <div>
          <!-- 分页逻辑 -->
          <Pagination v-model="pagination" @change="change_pag" small align="center" layout="pager"></Pagination>
        </div>
      </div>
    </section>

    <footer class="footer">
      <div class="container">@v3u.cn</div>
    </footer>
  </div>
</template>


<script>
import myheader from "./myheader";
import mycomment from "./mycomment";
import { config } from "../config";

export default {
  data() {
    return {
      msg: "这是一个变量",
      id: this.$route.query.id,
      good: "",
      color: "",
      size: "",
      config_good: "",
      // 七牛云url
      qiniuurl: config["qiniu"],
      qiniu_img_url: "",
      qiniu_image_url: "",
      pagination: {
        page: 1,
        size: 3,
        total: 0
      },
      pagination_comment:{
        page: 1,
        size: 3,
        total: 0
      },
      datalist: [],
      tags: "",
      content: "",
      contentlist: [],
      myuser: {},
      // 收藏的用户展示
      userflows: [],
      // 收藏按钮
      userflowbutton: "收藏",
      flow: '',
      // 购物车变量
      cartlist:[]
    };
  },
  components: {
    'myheader': myheader,
    'mycomment': mycomment
  },
  mounted() {
    this.change_pag(); // 调用商品展示分页
    this.get_good(); // 获取详细数据
    this.get_tags(); //获取标签
    this.gidflow(); // 该商品收藏的用户展示
    this.get_user();  // 调用用户信息
    this.change_pag_comment();  // 调用评论分页
    this.userflows_hrc();
  },
  //   filters: {
  //   myfilter: function(value) {
  //     return window.that.myuser[value]; // 通过key取用户名
  //   }
  // },
  methods: {
    // 加入购物车逻辑
    add_cart:function(){
      // console.log(this.good.name,this.id,this.good.price)
        // 遍历购物车
        var find = 0  // 标识符
        for (let i=0,l=this.cartlist.length;i<l;i++){
          // 如果商品存在
          if (this.id == this.cartlist[i]['gid']){
            this.cartlist[i]['num']++;  // 将该商品的数量+1
            find = 1
            break  // 已经找到了结束循环
          }
        }
        // 如果该商品为新商品
        if (find == 0){
          // 将该商品加入购物车列表
          this.cartlist.push({name:this.good.name, gid:this.id, price:this.good.price, num:1, img:this.good.img})
        }
        // console.log(this.cartlist)
        // 存入localstorage
        localStorage.setItem('cart',JSON.stringify(this.cartlist))
    },
    // 分页
    change_pag_comment: function() {
      this.axios.get("http://localhost:8000/pagecomment/", {
          params: {
            id: this.id,
            page: this.pagination.page,
            size: this.pagination.size
          }
        }).then(res => {
          this.contentlist = res.data.data;
          this.pagination_comment.total = res.data.total;
        });
    },
    // 获取用户信息
    get_user: function() {
      this.axios.get("http://localhost:8000/user_item/").then(res => {
        for (let i = 0, l = res.data.length; i < l; i++) {
          this.myuser[res.data[i].id] = res.data[i].username;
        }
      });
    },
    // 评论
    comment: function() {
      if (this.content == "") {
        this.$Message("评论为空");
        return false;
      }
      // 发送请求
      this.axios.post("http://localhost:8000/insertcomment/",this.qs.stringify({
            content: this.content,
            uid: localStorage.getItem("uid"),
            gid: this.id
          })
        ).then(res => {
          if (res.data.code == 200) {
            this.$Message(res.data.message);
            // this.contentlist.unshift({
            //   uid: localStorage.getItem("uid"),
            //   content: this.content
            // }); // 将评论内容和作者实时填充到评论容器中
            this.change_pag(); // 重新获取分页
            this.content = "";
          }
        });

      // 利用前端防止恶意评论
      // this.isDisable = true;
      // setTimeout(() => {this.isDisable = false;}, 3000); // 防止恶意刷屏
    },


    // // 判断用户是否收藏过
    userflows_hrc: function() {
      this.axios.get("http://localhost:8000/adduserflow/", {
          params: {
            uid: localStorage.getItem("uid"),
            gid: this.id
          }
        }).then(result => {
          this.userflowbutton = result.data.message;
        });
    },

    // 用户添加收藏接口
    adduserflow: function() {
      if (this.userflowbutton == '收藏'){
        this.axios.get("http://localhost:8000/adduserflow/", {
          params: {
            uid: localStorage.getItem("uid"),
            gid: this.id,
            type: 1
          }
        }).then(result => {
          this.$Message(result.data.message);
          this.userflowbutton = '已收藏'
        });
      }else if (this.userflowbutton == '已收藏'){
        this.axios.get("http://localhost:8000/adduserflow/", {
          params: {
            uid: localStorage.getItem("uid"),
            gid: this.id,
            type: 0
          }
        }).then(result => {
          this.$Message(result.data.message);
          this.userflowbutton = '收藏'
        });
      }
    },
    // 该商品收藏的用户展示
    gidflow: function() {
      this.axios.get("http://localhost:8000/gidflow/", {
          params: {
            gid: this.id
          }
        }).then(result => {
          this.userflows = result.data;
        });
    },
    // 获取标签
    get_tags: function() {
      this.axios.get(config["gettags"], {
          params: {
            id: this.id
          }
        }).then(res => {
          this.tags = res.data.tags;
        });
    },
    // 商品展示分页器
    change_pag: function() {
      this.axios.get("http://localhost:8000/goodslist/", {
          params: {
            page: this.pagination.page,
            size: this.pagination.size
          }
        }).then(res => {
          this.datalist = res.data.data;
          this.pagination.total = res.data.total;
        });
    },
    // 获取详细数据
    get_good: function() {
      this.axios.get(config["gooditem"], {
          params: {
            id: this.id
          }
        }).then(res => {
          this.good = res.data;
          this.qiniu_image_url = config["qiniu"] + res.data.video;
          this.qiniu_img_url = config["qiniu"] + res.data.img;
          this.flow = res.data.flow
          var params = JSON.parse(res.data.parms);
          this.color = params.color;
          this.size = params.size;
          this.config_good = params.config;
        });
    }
  }
};
</script>

<style>
</style>
